<template>
    <div class="schoolSelectContent">
        <view class="status_bar">
				<!-- 这里是状态栏 -->
		</view>
        <div class="myCustHeader">
			<backBtn />
            <div class="myTitle">
                所有校区
            </div>
            <div class="emptyBox"></div>
        </div>

        <div class="content">
            <div class="queryBox">
                <div class="queryInput">
                    <input class="uni-input" confirm-type="搜索" v-model="queryValue" @input="queryMySchool"  placeholder="请输入你需要查询的学校名称" />
                </div>
                <div class="queryBtn" @click="queryMySchool">
                    <uni-icons type="search" class="queryBtnIcon" size="28"></uni-icons>
                </div>
            </div>

            <div class="scrollContent">
                <div class="queryResultContent selectContent">

                    <div class="liItem" @click="toogleSchool(it)" :class="{disabled:!it.enable_status}" v-for="(it,i) in querySchoolList" :key="i">
                            <div class="infoBox">
                                <image :src="it.school_icon[0].url" class="schoolIcon"></image>
                                <div class="schoolName">
                                    {{it.school_name}}
                                </div>
                            </div>
                            <div class="rightBoxInfo">
                                <uni-icons type="right" size="20" class="rightIcon"></uni-icons>
                            </div>
                        </div>

                    <div class="emptySchoolBox">
                        没有找到您的校区？试试 <button open-type="contact" class="contactBtn">联系客服</button>
                    </div>

                    </div>
                    <div class="bigLeftTitle">
                        全部校区
                    </div>
                    <div class="cityBox">
                        <scroll-view class="scroll_view_w" :scroll-with-animation="true" scroll-x="true" :scroll-left="scrollViewLeft">
                            <div class="barBox flexStyle" :style="`width:${scrollViewWidth}px`">
                                <div 
                                    class="item" 
                                    v-for="(it,i) in childSchoolList"
                                    :class="{active:activeIndex===i}"
                                    :key="i"
                                    @click="toggleTab(i,it)"
                                >

                                    {{it.name}}
                                </div>
                            </div>
                        </scroll-view>
                    </div>
                    <div class="selectContent">

                        <div class="liItem" @click="toogleSchool(it)" :class="{disabled:!it.enable_status}" v-for="(it,i) in schoolList" :key="i">
                            <div class="infoBox">
                                <image :src="it.school_icon[0].url" class="schoolIcon"></image>
                                <div class="schoolName">
                                    {{it.school_name}}
                                </div>
                            </div>
                            <div class="rightBoxInfo">
                                <uni-icons type="right" size="20" class="rightIcon"></uni-icons>
                            </div>
                        </div>


                        <uni-load-more status="no-more" :contentText="{
                            contentnomore:`----- 我是底线了 -----`
                        }"></uni-load-more>


                    </div>

            </div>

        </div>

    </div>
</template>

<script src="./schoolSelect.ts" lang="ts"></script>

<style lang="stylus" scoped>
@import './schoolSelect.styl';
</style>
